<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Shopping list example</title>
    <style>
      li {
        margin-bottom: 10px;
      }
      li button {
        font-size: 8px;
        margin-left: 20px;
        color: #666;
      }
      .cont p{
		  display: inline;
	  }
    </style>
  </head>
  <body>
    
    <h1>My shopping list</h1>
    <form>
    <div>
      <label for="item">Enter a new item:</label>
      <input type="text" name="item" id="item">
      <button type="button" onclick="addItem()">Add item</button>
    </div>
   
    <ul>
      <!-- <li><span>12312</span><button  onclick="deleteTheDom()">Delete</button></li> -->
    </ul>
    <div class="cont">
      <span>购物车内的商品有：</span>
      <p id="cotent"></p>
      <button type="button" onclick="removeAll()">清空</button>
    </div>
  </form>
    <script>
	
      /**
      要求：
	  1、功能需求与上周一致
	  2、参考第六章 6.2 创建对象 创建一个NSet对象
	  NSet对象允许你存储原始值的唯一值。类似与java中的Set接口
	  NSet对象是值的集合，你可以按照插入的顺序迭代它的元素。 NSet中的元素只会出现一次，即 NSet 中的元素是唯一的。
	  
	  //初始化
	  var set = new NSet();
	  //属性 NSet的集合的大小
	  size;
	  //方法
	  //向NSet对象添加一个值 返回true或false
	  add(value);
	  //判断NSet是否包含值 返回true或false
	  has(value);
	  //根据索引返回对应的值 返回值
	  get(index);
	  //删除NSet中保存的值
	  remove(value);
	  //清空NSet保存的值
	  clear();
	  //返回NSet中保存的值的字符串，与插入的顺序保持一致，字符串以 ,(英文逗号) 分隔，空则返回空字符串
	  toString();

	  3、使用第11章DOM扩展api及自定义的NSet类型 完成
      **/
	  
	  
	  function NSet(name){
		
		this.nameList = [];
	  }
	  NSet.prototype = {
		size : function(){
		return this.nameList.length;
		}, 
		add : function(value){
			if(this.has(value)){
				return true;
			}else{
				return false;
			}
		},
		has : function(value){
			if(this.nameList.indexOf(value) > -1){
				return false;
			}else{
				this.nameList.push(value);
				return true;
			}
		},
		get : function(value){
			return this.nameList[value];
		},
		remove : function(value){
			if(this.nameList.indexOf(value) > -1){
				
				this.nameList = this.nameList.filter(item => item != value); 
				return true;
			}else{
				return false;
			}
			
		},
		clear : function(){
			 
			return this.nameList = [];
		},
		toString : function(){
			return this.nameList.join(",");
		}
	  }
	  
	   var testArr = []; //定义一数组
	   var nSet  = new NSet();
	   var ul = document.querySelector("ul");
	   var itemHtml;
	   var value;
	   
       function addItem(){
		var liArr = [];
	    var item = document.querySelector("#item").value.trim();
	    if(item === ''){
		 alert("不能为空");
		 return;
	    }
		
	    testArr=item.split("#"); //字符分割
		for(var i = 0 , len = testArr.length ; i < len ; i ++ ){
			value = testArr[i];
			if(value.trim()){
				if(nSet.add(value.trim())){
				 liArr[i]  = '<li><span>'+value.trim()+'</span><button type=button onclick="deleteTheDom(this.parentNode,'+value.trim()+')">Delete</button></li>'
				}
			}
		}
	   ul.innerHTML = liArr.join('');
	   document.querySelector("#item").value="";
	   document.querySelector("#cotent").innerHTML=nSet.toString();
		
      }
      function deleteTheDom(_ob,value){
        //_ob指向当前节点
		document.querySelector("ul").removeChild(_ob);
		var lis = document.querySelectorAll('button');
			 
			nSet.remove('' + value);
			document.querySelector("#cotent").innerHTML=nSet.toString();
			
		
      }
      function removeAll(){
	     document.querySelector("ul").innerHTML="";
		 document.querySelector("p").innerHTML="";
		 nSet.clear();
      }
	  
	  
	  
	  
	  
    </script>
  </body>
</html>